<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      ruleForm: {
        configValue: "",
        configId: "",
        configKey: "language",
        configName: "系统语言",
      },
    };
  },
  metaInfo() {
    return {
      title:
        this.$store.state.settings.dynamicTitle &&
        this.$store.state.settings.title,
      titleTemplate: (title) => {
        return title
          ? `${title} - ${process.env.VUE_APP_TITLE}`
          : process.env.VUE_APP_TITLE;
      },
    };
  },
  computed: {
    currentTheme() {
      return this.$store.state.settings.globalCurrentTheme;
    },
  },
  watch: {
    $route() {
      this.$store.dispatch("GetI18nsLanguage", this.ruleForm).then((res) => {
        this.$i18n.locale = res.rows[0].configValue;
        this.ruleForm.configId = res.rows[0].configId;
        if (this.$i18n.locale == "zh_CN") {
          document.title = "机器人控制系统";
        } else {
          document.title = "Robot Control System";
        }
      });
    },
  },
  created() {
    /**设置变量主题色 */
    window.document.documentElement.setAttribute(
      "data-theme",
      this.currentTheme
    );
    console.warn("当前主题色", this.currentTheme);
    /**获取国际化语言 */
    this.getKanguage();
    //在页面加载时读取sessionStorage里的状态信息
    if (sessionStorage.getItem("store")) {
      this.$store.replaceState(
        Object.assign(
          {},
          this.$store.state,
          JSON.parse(sessionStorage.getItem("store"))
        )
      );
    }

    //在页面刷新时将vuex里的信息保存到sessionStorage里
    window.addEventListener("beforeunload", () => {
      sessionStorage.setItem("store", JSON.stringify(this.$store.state));
    });
  },
  methods: {
    /**获取国际化语言 */
    getKanguage() {
      this.$store.dispatch("GetI18nsLanguage", this.ruleForm).then((res) => {
        this.$i18n.locale = res.rows[0].configValue;
        this.ruleForm.configId = res.rows[0].configId;
      });
    },
  },
};
</script>
<style lang="scss">
@mixin MenuTheme {
  // 深色主题
  [data-theme="theme-dark"] & {
    background: rgba(0, 209, 255, 0.2) !important;
  }
  // 浅色主题
  [data-theme="theme-light"] & {
    background: #ccc !important;
  }
}
#app {
  //一级菜单被选中背景色
  .el-menu-item.is-active {
    // background: rgba(0, 209, 255, 0.2) !important;
    @include MenuTheme();
    border-left: 2px solid #00d1ff;
    // padding-left: 15px !important;//设置不是激活项、与被激活项二级菜单距离左边的距离
  }
  //二级菜单被选中背景色
  .sidebar-container .theme-dark .el-submenu .el-menu-item.is-active {
    // background: rgba(0, 209, 255, 0.2) !important;
    @include MenuTheme();
    border-left: 2px solid #00d1ff;
  }
}

/* 更改日历界面popover样式 */
.calendar-message-popover {
  max-height: 450px !important;
  overflow: auto !important;
}
</style>
